<template>
  <div style="margin-left: auto">
    <p>开票核算表</p>
  </div>

  <div style="right: auto">
    <span>
      <el-button type="primary" @click="SalesOrderAdd()">保存</el-button>
    </span>
  </div>

  <hr />
  <el-scrollbar style="height: 320px; color: dimgray">
    <div class="scrollbar-flex-content">
      <p class="scrollbar-demo-item">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="单据编码：" style="width: 308px" disabled="true">
            <el-input v-model="form.documentsnumber" placeholder="" disabled="true" />
          </el-form-item>

          <el-form-item label="单据日期：" style="width: 308px">
            <el-date-picker v-model="form.documentsDate" type="date" />
          </el-form-item>

          <el-form-item label="单据状态：" style="width: 308px">
            <el-select v-model="form.documentstatus" disabled="true">
                <el-option label="开立" value="开立" />
                 <el-option label="审核" value="审核" />
                 <el-option label="返回" value="返回" />
            </el-select>
          </el-form-item>

          <el-form-item label="业务状态：" style="width: 308px" >
            <el-select v-model="form.businessstateId" disabled="true">
              <el-option label="正常" value="正常" />
              <el-option label="非正常" value="非正常" />
            </el-select>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="业务类型：" style="width: 308px">
            <el-select v-model="form.businessTypeId">
              <el-option label="销售订单" value="销售订单" />
            </el-select>
          </el-form-item>

          <el-form-item label="操作员：" style="width: 308px">
            <el-input v-model="form.operator" disabled="true" />
          </el-form-item>

          <el-form-item label="审核员：" style="width: 308px">
            <el-input v-model="form.auditor" disabled="true" />
          </el-form-item>

          <el-form-item label="审核日期：" style="width: 308px">
            <el-date-picker v-model="form.auditDate" type="date" disabled="true" />
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="客户名称：" style="width: 308px">
            <el-input v-model="form.clientName" /> </el-form-item
          ><el-link type="primary" @click="form1.dialogTableVisible = true"
            >选择</el-link
          >

          <div>
             <!-- 弹出框客户名称 -->
            <el-dialog
              v-model="form1.dialogTableVisible"
              title="选择客户"
              width="980"
            >
            <!-- 开票通知单客户名称选择查询 -->
              <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="客户名称">
                  <el-input v-model="page.customerName" />
                </el-form-item>
                <el-form-item label="联系人">
                  <el-input v-model="page.businessContacts" />
                </el-form-item>
                <el-button type="primary" @click="SearchCustomerProfilelist"
                  >搜索</el-button
                >
              </el-form>
            <!-- 开票通知单客户名称选择列表 -->
              <el-table :data="CustomerProfilelist">
                <el-table-column property="customerProfileId" label="序号" width="150"/>
                
                <el-table-column
                  property="customerName"
                  label="客户名称"
                  width="200"
                />
                <el-table-column property="warehouseName" label="联系人" />
                <el-table-column property="phone" label="手机号" />
                <el-table-column property="states" label="状态">
                  <template #default="scope">
                    <el-switch v-model="scope.row.states" disabled="true" />
                  </template>
                </el-table-column>

                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button
                      type="primary"
                      @click="SelectName(scope.row.customerName)"
                      >选择</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!-- 弹出框客户分页 -->
              <table>
                <tr>
                  <td>
                    <el-pagination
                      v-model:current-page="page.PageIndex"
                      v-model:page-size="page.PageSize"
                      :page-sizes="[1, 2, 3, 4]"
                      :size="false"
                      :disabled="false"
                      :background="true"
                      layout="slot,total"
                      :total="page.totalCount"
                      prev-text="上一页"
                      next-text="下一页"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    >
                    </el-pagination>
                  </td>
                  <br />
                  <td>
                    <el-pagination
                      v-model:current-page="page.PageIndex"
                      v-model:page-size="page.PageSize"
                      :page-sizes="[1, 2, 3, 4]"
                      :size="false"
                      :disabled="false"
                      :background="true"
                      layout="slot, sizes,prev, pager, next"
                      :total="page.totalCount"
                      prev-text="上一页"
                      next-text="下一页"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    >
                      <button
                        @click="handleCurrentChange(1)"
                        :disabled="page.PageIndex == 1"
                      >
                        首页
                      </button>
                    </el-pagination>
                  </td>
                  <br />
                  <td>
                    <el-pagination
                      v-model:current-page="page.PageIndex"
                      v-model:page-size="page.PageSize"
                      :page-sizes="[1, 2, 3, 4]"
                      :size="false"
                      :disabled="false"
                      :background="true"
                      layout="slot, jumper"
                      :total="page.totalCount"
                      prev-text="上一页"
                      next-text="下一页"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    >
                      <button
                        @click="handleCurrentChange(page.pageCount)"
                        :disabled="page.PageIndex == page.pageCount"
                      >
                        尾页
                      </button>
                    </el-pagination>
                  </td>
                </tr>
              </table>
            </el-dialog>
          </div>

          <el-form-item label="蓝字红字：" style="width: 308px">
            <el-select v-model="form.blueandredId">
              <el-option label="蓝字" value="蓝字" />
              <el-option label="红字" value="红字" />
            </el-select>
          </el-form-item>

          <el-form-item label="税率：" style="width: 308px">
            <el-select v-model="form.rateId">
              <el-option label="13%" value="13%" />
              <el-option label="9%" value="9%" />
              <el-option label="17%" value="17" />
              <el-option label="无" value="无" />
            </el-select>
          </el-form-item>

          <el-form-item label="发票类型：" style="width: 308px">
            <el-select v-model="form.invoiceTypeId">
              <el-option label="增值税专用发票" value="增值税专用发票" />
              <el-option
                label="增值税电子专用发票"
                value="增值税电子专用发票"
              />
              <el-option label="增值税普通发票" value="增值税普通发票" />
              <el-option
                label="增值税电子普通发票"
                value="增值税电子普通发票"
              />
              <el-option label="通行费发票" value="通行费发票" />
              <el-option
                label="机动车销售统一发票"
                value="机动车销售统一发票"
              />
              <el-option
                label="二手车销售统一发票"
                value="二手车销售统一发票"
              />
              <el-option
                label="数电票(增值税专用发票)"
                value="数电票(增值税专用发票)"
              />
              <el-option label="数电票(普通发票)" value="数电票(普通发票)" />
              <el-option
                label="数电纸质发票(增值税专用发票)"
                value="数电纸质发票(增值税专用发票)"
              />
              <el-option
                label="数电纸质发票(普通发票)"
                value="数电纸质发票(普通发票)"
              />
              <el-option
                label="数电票(机动车销售统一发票)"
                value="数电票(机动车销售统一发票)"
              />
              <el-option
                label="数电票(二手车销售统一发票)"
                value="数电票(二手车销售统一发票)"
              />
              <el-option
                label="数电票(铁路电子客票)"
                value="数电票(铁路电子客票)"
              />
              <el-option
                label="航空运输电子客票行程单"
                value="航空运输电子客票行程单"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="开户行：" style="width: 308px">
            <el-input v-model="form.bank" />
          </el-form-item>

          <el-form-item label="账号：" style="width: 308px">
            <el-input v-model="form.account" />
          </el-form-item>

          <el-form-item label="税号：" style="width: 308px">
            <el-input v-model="form.rateNumber" />
          </el-form-item>

          <el-form-item label="地址电话：" style="width: 308px">
            <el-input v-model="form.addresstelephone" />
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="交付邮箱：" style="width: 308px">
            <el-input v-model="form.deliverymailbox" />
          </el-form-item>

          <el-form-item label="备注信息：" style="width: 308px">
            <el-input v-model="form.beiZ" />
          </el-form-item>
        </el-form>
      </p>
    </div>
  </el-scrollbar>

  <el-button type="primary" @click="add">新增物料</el-button>
  <table style="border-collapse: collapse">
    <tr>
      <td>序号</td>
      <td>销售订单号</td>
      <td>单据编码</td>
      <td>物料编码</td>
      <td>物料名称</td>
      <td>型号规格</td>
      <td>主计量</td>
      <td>开票名称</td>
      <td>开票数量</td>
      <td>开票单价</td>
      <td>开票金额</td>
      <td>备注</td>
      <td>操作</td>
    </tr>
    <tr v-for="(ruleForm, index) in loge.healthArray">
      <td>
        {{ ruleForm.billingmaterialId }}
      </td>
      <td>
        {{ ruleForm.saleordersNumber }}
      </td>
      <td>
        {{ ruleForm.documentencoding }}
      </td>
      <td>
        {{ ruleForm.itemBianma }}
        <el-link type="primary" @click="xuanze(index)">选择</el-link>
        <div>
          <!-- 物料信息弹出框 -->
          <el-dialog
            v-model="form1.dialogTableVisible111"
            title="选择物料"
            width="900"
            style="height: 600px"
          >
            <div class="common-layout" style="width: 165px; float: left">
              <el-container>
                <el-aside width="165px" style="margin-left: 10px">
                  <el-tree
                    ref="treeRef"
                    class="filter-tree"
                    :data="data"
                    :props="defaultProps"
                    style="
                      width: 165px;
                      border: 0px solid #ccc;
                      float: left;
                      height: 500px;
                    "
                    default-expand-all
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    @node-click="handleNodeClick"
                  />
                </el-aside>
                <el-main> </el-main>
              </el-container>
            </div>

            <div class="common-layout" style="float: right; top: 12px">
              <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="物料编码">
                  <el-input v-model="Materials.itemBianma" />
                </el-form-item>
                <el-form-item label="物料名称">
                  <el-input v-model="Materials.itemName" />
                </el-form-item>
                <el-button type="primary" @click="SearchMaterialsShow"
                  >搜索</el-button
                >
              </el-form>
              <el-table :data="MaterialsShowlist" style="height: 500px">
                <el-table-column
                  property="itemBianma"
                  label="物料编码"
                  width="150"
                />
                <el-table-column
                  property="itemName"
                  label="物料名称"
                  width="200"
                />
                <el-table-column
                  property="modelspecification"
                  label="型号规格"
                />
                <el-table-column property="measurenum" label="主计量" />

                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button type="primary" 
                    @click="Selectnumber
                    (scope.row.itemBianma,scope.row.itemName,scope.row.modelspecification,scope.row.measureName,scope.row.billingName,index1)">
                    选择</el-button>
                  </template>
                </el-table-column>

              </el-table>
            </div>
          </el-dialog>
        </div>
      </td>
      
      <td>
        {{ ruleForm.materialName }}
      </td>
      <td>
        {{ ruleForm.specifications }}
      </td>

      <td>
        {{ ruleForm.measurenum }}
        <!-- <el-select v-model="ruleForm.measurenum" style="width: 100px">
                    <el-option lable="无" value="无"></el-option>
                    <el-option lable="吨" value="吨"></el-option>
                    <el-option lable="千克" value="千克"></el-option>
                    <el-option lable="克" value="克"></el-option>
                    <el-option lable="千米" value="千米"></el-option>
                    <el-option lable="米" value="米"></el-option>
                    <el-option lable="升" value="升"></el-option>
                    <el-option lable="只" value="只"></el-option>
                    <el-option lable="台" value="台"></el-option>
                    <el-option lable="套" value="套"></el-option>
                    <el-option lable="毫升" value="毫升"></el-option>
        </el-select> -->
      </td>
      <td>
        {{ ruleForm.billingName }}
      </td>
      <!-- 开票数量 -->
      <td>
        <el-input v-model="ruleForm.billingNumber" @blur="jisuan(index)" placeholder="请输入" style="width: 100px">
        </el-input>
      </td>
      <!-- 开票单价 --> 
      <td>
        <el-input v-model="ruleForm.billingPrice" @blur="jisuan(index)" style="width: 100px">
        </el-input>
      </td>
      <!-- 开票总金额 --> 
      <td>
        <el-input v-model="ruleForm.billingSum" style="width: 100px">
        </el-input>
      </td>

      <td>
        <el-input v-model="ruleForm.remark" style="width: 100px">
        </el-input>
      </td>
      <td>
        <el-link style="color: red" @click="del">删除</el-link>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import Cookie from "cookies-ts";
import axios from "axios";
import { number } from "echarts";
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020


const form1 = reactive({
  //客户弹出层
  dialogTableVisible: false,
  //物料弹出层
  dialogTableVisible111: false
});
onMounted(() => {
 //客户显示
  SearchCustomerProfilelist();
  //物料选择显示
  SearchMaterialsShow();
  loadData();
  //绑定树形
  GetBang();
});
//映射用户名到操作员文本框里
const loadData = () => {
  if (cookie.get("employeeName") != null) {
    form.operator = cookie.get("employeeName") as string;
  }
};

//选择客户表 反填客户名称
const SelectName = (customerName: any) => {
  localStorage.setItem("customerName", customerName);
  if (localStorage.getItem("customerName") != null) {
    form.clientName = localStorage.getItem("customerName") as string;
  }
  form1.dialogTableVisible = false;
};
const index1 = ref(0);
const xuanze = (index: any) => {
  form1.dialogTableVisible111 = true;
  index1.value = index;
};
const cookie = new Cookie();
const router = useRouter();
const route = useRoute();
// 开票通知单表单
const form = reactive({
  documentsnumber:"",//单据编号
  documentsDate:"",//单据日期
  documentstatus:"开立",//单据状态
  businessstateId:"正常",//业务状态
  businessTypeId:"销售订单",//业务类型
  operator:"",//     操作员 审核员
  clientName:"",//客户名称
  blueandredId:"蓝字",//蓝字红字
  rateId: "13%",//税率
  invoiceTypeId:"",//发票类型
  bank:"",//开户银行
  account:"",//账号
  rateNumber:"",//税号
  addresstelephone:"",//地址电话
  deliverymailbox:"",//交货邮箱
  beiZ:"",//备注
  auditor:"李颖",//审核员
  auditDate:"2023-02-03",//审核时间
  itemBianma: localStorage.getItem("itemBianma") as string
});

//计算物料的开票总金额
const jisuan = (index: number) => {
  var price = loge.healthArray[index].billingPrice;
  var num = loge.healthArray[index].billingNumber;
  loge.healthArray[index].billingSum = price * num;
};
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.includes(value);
};
//物料编码选择
const Selectnumber = (
  itemBianma: any,//物料编码
  materialName: any,//物料名称
  specifications: any,//型号规格
  measurenum: any,//主计量
  billingName: any,//开票名称
  index: any
) => {
  console.log(index);
  localStorage.setItem("itemBianma", itemBianma);//物料编码
  localStorage.setItem("itemName", materialName);//物料名称
  localStorage.setItem("modelspecification", specifications);//型号规格
  localStorage.setItem("measureName", measurenum);//主计量
  localStorage.setItem("billingName", materialName+specifications);//开票名称
  if (
    localStorage.getItem("itemBianma") != null ||
    localStorage.getItem("itemName") != null ||
    localStorage.getItem("modelspecification") != null ||
    localStorage.getItem("measureId") != null||
    localStorage.getItem("billingName") != null
  ) {
    loge.healthArray[index].itemBianma = localStorage.getItem(
      "itemBianma"
    ) as string;
    loge.healthArray[index].materialName = localStorage.getItem(
      "itemName"
    ) as string;
    loge.healthArray[index].specifications = localStorage.getItem(
      "modelspecification"
    ) as string;//型号规格
    loge.healthArray[index].measurenum = localStorage.getItem(
      "measureName"
    ) as string;//主计量
    loge.healthArray[index].billingName = localStorage.getItem(
      "billingName"
    ) as string;//开票名称
    loge.healthArray[index].saleordersNumber="手工单据";//销售订单号
    loge.healthArray[index].documentencoding="手工单据"//销售订单号
  }
  console.log(loge.healthArray[index]);
  form1.dialogTableVisible111 = false;
};
//物料树形级联
const defaultProps = {
  children: "children",
  label: "label"
};
//物料树形数据
var data = ref([]);
function GetBang() {
  axios({
    url: apiurls+"/api/Materials/GetmaterialTree",
    method: "get"
  }).then((res) => {
    data.value = res.data.data;
  });
}
const handleNodeClick = (data: any) => {
  uptform.materialTypeName = data.label;
  uptform.pId = data.value;
  console.log(uptform.pId);
};
const uptform = reactive({
  materialTypeName: "",
  pId: 0
});

//新增行序号
const numbers = ref(1);
const loge = reactive({
  healthArray: <any>[
    reactive({
      billingmaterialId: numbers.value,
      saleordersNumber: "",// 销售订单号
      documentencoding: "",// 单据编码
      itemBianma: "",// 物料编码
      materialName: "",// 物料名称
      specifications: "",// 型号规格
      measurenum: "",// 主计量
      billingName: "",// 开票名称
      billingNumber: 0,// 开票数量
      billingPrice: 0,// 开票单价
      billingSum: 0,// 开票金额
      remark: "",// 备注
      createdOwnerId: cookie.get("employeeName"),
      createdTime: new Date(),
      updatedOwnerId: "",
      updatedTime: new Date(),
      deletedOwnerId: "",
      deletedTime: new Date(),
      isDeleted: true,
      auditor: cookie.get("employeeName"),
      auditDate: new Date()
    })
  ]
});
const aaa = cookie.get("employeeName");
console.log(aaa);
//新增行
const add = () => {
  loge.healthArray.push(
    reactive({
      billingmaterialId: loge.healthArray.length + numbers.value,
      saleordersNumber: "",// 销售订单号
      documentencoding: "",// 单据编码
      itemBianma: "",// 物料编码
      materialName: "",// 物料名称
      specifications: "",// 型号规格
      measurenum: "",// 主计量
      billingName: "",// 开票名称
      billingNumber: 0,// 开票数量
      billingPrice: 0,// 开票单价
      billingSum: 0,// 开票金额
      remark: "",// 备注
      createdOwnerId: cookie.get("employeeName"),
      createdTime: new Date(),
      updatedOwnerId: "",
      updatedTime: new Date(),
      deletedOwnerId: "",
      deletedTime: new Date(),
      isDeleted: true,
      auditor: cookie.get("employeeName"),
      auditDate: new Date()
    })
  );
};
//删除行
const del = () => {
  loge.healthArray.splice(loge.healthArray.length - 1, 1);
  ElMessage.warning({
    message: "删除成功"
  });
};
const Materials = reactive({
  itemBianma: "",
  itemName: "",
  measureName:""
});
//物料数据显示
const MaterialsShowlist = ref([]);
const SearchMaterialsShow = () => {
  axios
    .get(apiurls+"/api/Materials/MaterialesSearch", {
      params: {
        materialTypeId: uptform.pId,
        itemBianma: Materials.itemBianma,
        itemName: Materials.itemName,
        measureName: Materials.measureName,
      }
    })
    .then((res) => {
      MaterialsShowlist.value = res.data.data2;
      console.log(MaterialsShowlist.value,111111111);
    });
};

//开票通知单客户显示
const page = reactive({
  customerName: "",
  businessContacts: "",
  PageIndex: 1,
  PageSize: 10,
  totalCount: 0,
  pageCount: 0
});
const handleSizeChange = (val: number) => {
  page.PageSize = val;
  SearchCustomerProfilelist();
};
const handleCurrentChange = (val: number) => {
  page.PageIndex = val;
  SearchCustomerProfilelist();
};
const CustomerProfilelist = ref([]);
const SearchCustomerProfilelist = () => {
  axios
    .post(epiurls+"/api/SalesOrder/SearchCustomerProfile", {
      customerName: page.customerName,
      businessContacts: page.businessContacts,
      PageIndex: page.PageIndex,
      PageSize: page.PageSize
    })
    .then((res) => {
      CustomerProfilelist.value = res.data.data;
      page.totalCount = res.data.totalCount;
      page.pageCount = res.data.pageCount;
    });
};



//开票通知单添加
const SalesOrderAdd = () => {
  // form.itemBianma = loge.healthArray[3].itemBianma;
 if(form.documentsDate=="")
 {
  ElMessage.error("请输入单据日期");
  return;
 }
 if(form.operator=="")
 {
  ElMessage.error("请输入操作员");
  return;
 }
 if(form.clientName=="")
 {
  ElMessage.error("请输入客户名称");
  return;
 }
 if(form.invoiceTypeId=="")
 {
  ElMessage.error("请输入发票类型");
  return;
 }
 if(form.bank=="")
 {
  ElMessage.error("请输入开户银行");
  return;
 }
 if(form.account=="")
 {
  ElMessage.error("请输入账号");
  return;
 }
 if(form.rateNumber=="")
 {
  ElMessage.error("请输入税号");
  return;
 }
 if(form.addresstelephone=="")
 {
  ElMessage.error("请输入地址电话");
  return;
 }
 if(form.deliverymailbox=="")
 {
  ElMessage.error("请输入交货邮箱");
  return;
 }
 if(form.beiZ=="")
 {
  ElMessage.error("请输入备注");
  return;
 }


  axios
    .post(
      fpiurls+"/api/BilleInvoice/CreateInvoice",
      form
    )
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage({
          message: "新增成功",
          type: "success"
        });
      } else {
        ElMessage({
          message: "新增失败",
          type: "error"
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });

  //开票通知单物料添加
  const request: any = ref({});
  request.billingMaterials = loge.healthArray;
  console.log(request);

  if(request.billingMaterials.length==0)
  {
    ElMessage.error("请添加物料");
    return;
  }
  axios
    .post(
      fpiurls+"/api/BilleInvoice/CreateBilleMater",
      request
    )
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage({
          message: "新增成功",
          type: "success"
        });
        router.push('/Invoicingmemo/BillingListView')
      } else {
        ElMessage({
          message: "新增失败",
          type: "error"
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1800px;
  height: 300px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
}
</style>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
  border-top: 1px solid #ccc;
  /* 设置顶部边框为3px宽度的红色 */
  padding: 10px;
  text-align: center;
}

/* 设置 td 的样式 */

table td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
  height: 60px;
  width: 150px;
  white-space: nowrap;
  /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/*______________________________________________________*/

.table-container {
  max-width: 100%;
  overflow-x: auto;
  /* 启用水平滚动 */
  margin: 20px 0;
  /* 设置容器的外边距 */
}

/* :deep(.el-input__wrapper) {
    box-shadow: none;
    text-align: center;
}

:deep(.el-select__wrapper) {
    box-shadow: none;
}

::v-deep(.center-input .el-input__inner) {
    text-align: center;
} */
</style>
